import React from "react";

export function LeftToolbar({
  mode,
  onModeChange,
}: {
  mode: "edit" | "preview";
  onModeChange: (mode: "edit" | "preview") => void;
}) {
  return (
    <div className="magic-copy-toolbar">
      <button
        className="magic-copy-mode-button"
        onClick={() => {
          if (mode === "edit") {
            onModeChange("preview");
          } else {
            onModeChange("edit");
          }
        }}
      >
        <div
          style={{
            backgroundColor: "#D9D9D9",
            width: "56px",
            height: "35px",
            borderRadius: "30px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
            padding: "0 6px",
            boxSizing: "border-box",
            marginRight: "12px",
          }}
        >
          <div
            style={{
              backgroundColor: mode === "edit" ? "#4DA850" : "#716B6B",
              width: "16px",
              height: "16px",
              borderRadius: "50%",
              alignSelf: mode === "edit" ? "flex-start" : "flex-end",
              padding: "4px",
            }}
          >
            {mode === "edit" ? (
              <svg
                width="16"
                height="16"
                viewBox="0 0 13 13"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.16004 2.76001L8.92002 1L12 4.08001L10.24 5.83999M7.16004 2.76001L1.18225 8.73777C1.06556 8.85444 1 9.01274 1 9.17776V12H3.82226C3.98729 12 4.14556 11.9345 4.26226 11.8177L10.24 5.83999M7.16004 2.76001L10.24 5.83999"
                  stroke="white"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            ) : (
              <svg
                width="16"
                height="16"
                viewBox="0 0 17 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8.50016 7.66732C9.42066 7.66732 10.1668 6.92115 10.1668 6.00065C10.1668 5.08015 9.42066 4.33398 8.50016 4.33398C7.57966 4.33398 6.8335 5.08015 6.8335 6.00065C6.8335 6.92115 7.57966 7.66732 8.50016 7.66732Z"
                  stroke="white"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <path
                  d="M16 6C14.4262 8.4925 11.5986 11 8.5 11C5.40142 11 2.5738 8.4925 1 6C2.91546 3.63188 5.15969 1 8.5 1C11.8403 1 14.0846 3.63183 16 6Z"
                  stroke="white"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            )}
          </div>
        </div>
        {mode === "edit" ? "Edit" : "Preview"}
      </button>
    </div>
  );
}

export function RightToolbar({
  onUndo,
  isUndoDisabled,
  onCopy,
  isCopyDisabled,
  onDownload,
  isDownloadDisabled,
}: {
  onUndo: () => void;
  isUndoDisabled: boolean;
  onCopy: () => void;
  isCopyDisabled: boolean;
  onDownload: () => void;
  isDownloadDisabled: boolean;
}) {
  return (
    <div className="magic-copy-toolbar">
      <button onClick={onUndo} disabled={isUndoDisabled}>
        {isUndoDisabled ? (
          <svg width="24" height="24" viewBox="0 0 26 26">
            <path
              opacity="0.4"
              d="M7.553 0H18.434C23.179 0 26 2.821 26 7.553V18.434C26 23.166 23.179 25.987 18.447 25.987H7.553C2.821 26 0 23.179 0 18.447V7.553C0 2.821 2.821 0 7.553 0Z"
              fill="#9F9F9F"
            />
            <path
              d="M15.4954 9.07412H8.80029L9.22929 8.64512C9.60629 8.26812 9.60629 7.64412 9.22929 7.26712C8.85229 6.89013 8.22829 6.89013 7.85129 7.26712L5.81029 9.30812C5.43329 9.68512 5.43329 10.3091 5.81029 10.6862L7.85129 12.7272C8.04629 12.9222 8.29329 13.0132 8.54029 13.0132C8.78729 13.0132 9.03429 12.9222 9.22929 12.7272C9.60629 12.3502 9.60629 11.7262 9.22929 11.3492L8.89129 11.0112H15.4954C17.1594 11.0112 18.5244 12.3632 18.5244 14.0402C18.5244 15.7172 17.1724 17.0692 15.4954 17.0692H9.09929C8.56629 17.0692 8.12429 17.5112 8.12429 18.0442C8.12429 18.5772 8.56629 19.0192 9.09929 19.0192H15.4954C18.2384 19.0192 20.4744 16.7832 20.4744 14.0402C20.4744 11.2972 18.2384 9.07412 15.4954 9.07412Z"
              fill="#5F6368"
            />
          </svg>
        ) : (
          <svg width="24" height="24" viewBox="0 0 26 26">
            <path
              opacity="0.4"
              d="M7.553 0H18.434C23.179 0 26 2.821 26 7.553V18.434C26 23.166 23.179 25.987 18.447 25.987H7.553C2.821 26 0 23.179 0 18.447V7.553C0 2.821 2.821 0 7.553 0Z"
              fill="#9F9F9F"
            />
            <path
              d="M15.4954 9.07412H8.80029L9.22929 8.64512C9.60629 8.26812 9.60629 7.64412 9.22929 7.26712C8.85229 6.89013 8.22829 6.89013 7.85129 7.26712L5.81029 9.30812C5.43329 9.68512 5.43329 10.3091 5.81029 10.6862L7.85129 12.7272C8.04629 12.9222 8.29329 13.0132 8.54029 13.0132C8.78729 13.0132 9.03429 12.9222 9.22929 12.7272C9.60629 12.3502 9.60629 11.7262 9.22929 11.3492L8.89129 11.0112H15.4954C17.1594 11.0112 18.5244 12.3632 18.5244 14.0402C18.5244 15.7172 17.1724 17.0692 15.4954 17.0692H9.09929C8.56629 17.0692 8.12429 17.5112 8.12429 18.0442C8.12429 18.5772 8.56629 19.0192 9.09929 19.0192H15.4954C18.2384 19.0192 20.4744 16.7832 20.4744 14.0402C20.4744 11.2972 18.2384 9.07412 15.4954 9.07412Z"
              fill="#292D32"
            />
          </svg>
        )}
        Undo
      </button>
      <button onClick={onCopy} disabled={isCopyDisabled}>
        {isCopyDisabled ? (
          <svg width="24" height="24" viewBox="0 0 27 27">
            <path
              d="M18.9 14.7156V20.3856C18.9 25.1106 17.01 27.0006 12.285 27.0006H6.615C1.89 27.0006 0 25.1106 0 20.3856V14.7156C0 9.99059 1.89 8.10059 6.615 8.10059H12.285C17.01 8.10059 18.9 9.99059 18.9 14.7156Z"
              fill="#D3D3D3"
            />
            <path
              opacity="0.4"
              d="M20.3847 0H14.7147C10.0572 0 8.1672 1.8495 8.1132 6.4125H12.2847C17.9547 6.4125 20.5872 9.045 20.5872 14.715V18.8865C25.1502 18.8325 26.9997 16.9425 26.9997 12.285V6.615C26.9997 1.89 25.1097 0 20.3847 0Z"
              fill="#292D32"
              fillOpacity="0.82"
            />
          </svg>
        ) : (
          <svg width="24" height="24" viewBox="0 0 27 27">
            <path
              d="M18.9 14.7156V20.3856C18.9 25.1106 17.01 27.0006 12.285 27.0006H6.615C1.89 27.0006 0 25.1106 0 20.3856V14.7156C0 9.99059 1.89 8.10059 6.615 8.10059H12.285C17.01 8.10059 18.9 9.99059 18.9 14.7156Z"
              fill="#9F9F9F"
            />
            <path
              opacity="0.4"
              d="M20.3847 0H14.7147C10.0572 0 8.1672 1.8495 8.1132 6.4125H12.2847C17.9547 6.4125 20.5872 9.045 20.5872 14.715V18.8865C25.1502 18.8325 26.9997 16.9425 26.9997 12.285V6.615C26.9997 1.89 25.1097 0 20.3847 0Z"
              fill="black"
            />
          </svg>
        )}
        Copy
      </button>
      <button onClick={onDownload} disabled={isDownloadDisabled}>
        {isDownloadDisabled ? (
          <svg width="24" height="24" viewBox="0 0 26 26">
            <path
              opacity="0.4"
              d="M0 18.447V7.553C0 2.821 2.821 0 7.553 0H18.434C23.179 0 26 2.821 26 7.553V18.434C26 23.166 23.179 25.987 18.447 25.987H7.553C2.821 26 0 23.179 0 18.447Z"
              fill="#9F9F9F"
            />
            <path
              d="M12.3115 21.4891L6.73451 15.9121C6.35751 15.5351 6.35751 14.9111 6.73451 14.5341C7.11151 14.1571 7.73551 14.1571 8.11251 14.5341L12.0255 18.4471V5.2001C12.0255 4.6671 12.4675 4.2251 13.0005 4.2251C13.5335 4.2251 13.9755 4.6671 13.9755 5.2001V18.4471L17.8885 14.5341C18.2655 14.1571 18.8895 14.1571 19.2665 14.5341C19.4615 14.7291 19.5525 14.9761 19.5525 15.2231C19.5525 15.4701 19.4615 15.7171 19.2665 15.9121L13.6895 21.4891C13.5075 21.6711 13.2605 21.7751 13.0005 21.7751C12.7405 21.7751 12.4935 21.6711 12.3115 21.4891Z"
              fill="#5F6368"
            />
          </svg>
        ) : (
          <svg width="24" height="24" viewBox="0 0 27 26">
            <path
              opacity="0.4"
              d="M0 18.4562V7.55677C0 2.82241 2.82241 0 7.55676 0H18.4432C23.1906 0 26.013 2.82241 26.013 7.55677V18.4432C26.013 23.1775 23.1906 26 18.4562 26H7.55676C2.82241 26.013 0 23.1906 0 18.4562Z"
              fill="#9F9F9F"
            />
            <path
              d="M12.3177 21.4997L6.73787 15.9199C6.36068 15.5427 6.36068 14.9184 6.73787 14.5412C7.11506 14.164 7.73937 14.164 8.11656 14.5412L12.0315 18.4561V5.20254C12.0315 4.66927 12.4737 4.22705 13.007 4.22705C13.5403 4.22705 13.9825 4.66927 13.9825 5.20254V18.4561L17.8974 14.5412C18.2746 14.164 18.8989 14.164 19.2761 14.5412C19.4712 14.7363 19.5623 14.9834 19.5623 15.2305C19.5623 15.4777 19.4712 15.7248 19.2761 15.9199L13.6964 21.4997C13.5143 21.6817 13.2671 21.7858 13.007 21.7858C12.7469 21.7858 12.4998 21.6817 12.3177 21.4997Z"
              fill="#292D32"
            />
          </svg>
        )}
        Download
      </button>
    </div>
  );
}

export function RightFigmaToolbar({
  onUndo,
  isUndoDisabled,
  onApply,
  isApplyDisabled,
  onErase,
  isEraseDisabled,
}: {
  onUndo: () => void;
  isUndoDisabled: boolean;
  onApply: () => void;
  isApplyDisabled: boolean;
  onErase: () => void;
  isEraseDisabled: boolean;
}) {
  return (
    <div className="magic-copy-toolbar">
      <button onClick={onErase} disabled={isEraseDisabled}>
        <svg
          width="24"
          height="24"
          viewBox="0 0 17 17"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16.1781 16.9999H10.1926C9.8355 16.9999 9.55493 16.7109 9.55493 16.3623C9.55493 16.0137 9.844 15.7246 10.1926 15.7246H16.1781C16.5352 15.7246 16.8158 16.0137 16.8158 16.3623C16.8158 16.7109 16.5352 16.9999 16.1781 16.9999Z"
            fill="#606367"
          />
          <path
            d="M9.89484 12.4855C10.2264 12.817 10.2264 13.3527 9.89484 13.6928L7.3612 16.2264C6.41746 17.1701 4.90408 17.2212 3.90083 16.3794C3.84131 16.3284 3.7903 16.2774 3.73928 16.2264L2.9996 15.4867L1.47771 13.9648L0.746528 13.2336C0.687013 13.1741 0.636 13.1146 0.584987 13.0551C-0.248223 12.0518 -0.188708 10.5555 0.746528 9.62023L3.28017 7.08659C3.61175 6.75499 4.14739 6.75499 4.47897 7.08659L9.89484 12.4855Z"
            fill="#606367"
          />
          <path
            d="M16.2539 7.34372L12.0028 11.5948C11.6712 11.9264 11.1356 11.9264 10.804 11.5948L5.38809 6.19594C5.05651 5.86436 5.05651 5.32872 5.38809 4.98864L9.63919 0.746064C10.6339 -0.248688 12.2663 -0.248688 13.2611 0.746064L16.2539 3.73032C17.2486 4.72507 17.2486 6.34898 16.2539 7.34372Z"
            fill="#9F9F9F"
          />
        </svg>
        Erase
      </button>
      <button onClick={onUndo} disabled={isUndoDisabled}>
        {isUndoDisabled ? (
          <svg width="24" height="24" viewBox="0 0 26 26">
            <path
              opacity="0.4"
              d="M7.553 0H18.434C23.179 0 26 2.821 26 7.553V18.434C26 23.166 23.179 25.987 18.447 25.987H7.553C2.821 26 0 23.179 0 18.447V7.553C0 2.821 2.821 0 7.553 0Z"
              fill="#9F9F9F"
            />
            <path
              d="M15.4954 9.07412H8.80029L9.22929 8.64512C9.60629 8.26812 9.60629 7.64412 9.22929 7.26712C8.85229 6.89013 8.22829 6.89013 7.85129 7.26712L5.81029 9.30812C5.43329 9.68512 5.43329 10.3091 5.81029 10.6862L7.85129 12.7272C8.04629 12.9222 8.29329 13.0132 8.54029 13.0132C8.78729 13.0132 9.03429 12.9222 9.22929 12.7272C9.60629 12.3502 9.60629 11.7262 9.22929 11.3492L8.89129 11.0112H15.4954C17.1594 11.0112 18.5244 12.3632 18.5244 14.0402C18.5244 15.7172 17.1724 17.0692 15.4954 17.0692H9.09929C8.56629 17.0692 8.12429 17.5112 8.12429 18.0442C8.12429 18.5772 8.56629 19.0192 9.09929 19.0192H15.4954C18.2384 19.0192 20.4744 16.7832 20.4744 14.0402C20.4744 11.2972 18.2384 9.07412 15.4954 9.07412Z"
              fill="#5F6368"
            />
          </svg>
        ) : (
          <svg width="24" height="24" viewBox="0 0 26 26">
            <path
              opacity="0.4"
              d="M7.553 0H18.434C23.179 0 26 2.821 26 7.553V18.434C26 23.166 23.179 25.987 18.447 25.987H7.553C2.821 26 0 23.179 0 18.447V7.553C0 2.821 2.821 0 7.553 0Z"
              fill="#9F9F9F"
            />
            <path
              d="M15.4954 9.07412H8.80029L9.22929 8.64512C9.60629 8.26812 9.60629 7.64412 9.22929 7.26712C8.85229 6.89013 8.22829 6.89013 7.85129 7.26712L5.81029 9.30812C5.43329 9.68512 5.43329 10.3091 5.81029 10.6862L7.85129 12.7272C8.04629 12.9222 8.29329 13.0132 8.54029 13.0132C8.78729 13.0132 9.03429 12.9222 9.22929 12.7272C9.60629 12.3502 9.60629 11.7262 9.22929 11.3492L8.89129 11.0112H15.4954C17.1594 11.0112 18.5244 12.3632 18.5244 14.0402C18.5244 15.7172 17.1724 17.0692 15.4954 17.0692H9.09929C8.56629 17.0692 8.12429 17.5112 8.12429 18.0442C8.12429 18.5772 8.56629 19.0192 9.09929 19.0192H15.4954C18.2384 19.0192 20.4744 16.7832 20.4744 14.0402C20.4744 11.2972 18.2384 9.07412 15.4954 9.07412Z"
              fill="#292D32"
            />
          </svg>
        )}
        Undo
      </button>
      <button onClick={onApply} disabled={isApplyDisabled}>
        {isApplyDisabled ? (
          <svg width="24" height="24" viewBox="0 0 26 26">
            <path
              opacity="0.4"
              d="M0 18.447V7.553C0 2.821 2.821 0 7.553 0H18.434C23.179 0 26 2.821 26 7.553V18.434C26 23.166 23.179 25.987 18.447 25.987H7.553C2.821 26 0 23.179 0 18.447Z"
              fill="#9F9F9F"
            />
            <path
              d="M12.3115 21.4891L6.73451 15.9121C6.35751 15.5351 6.35751 14.9111 6.73451 14.5341C7.11151 14.1571 7.73551 14.1571 8.11251 14.5341L12.0255 18.4471V5.2001C12.0255 4.6671 12.4675 4.2251 13.0005 4.2251C13.5335 4.2251 13.9755 4.6671 13.9755 5.2001V18.4471L17.8885 14.5341C18.2655 14.1571 18.8895 14.1571 19.2665 14.5341C19.4615 14.7291 19.5525 14.9761 19.5525 15.2231C19.5525 15.4701 19.4615 15.7171 19.2665 15.9121L13.6895 21.4891C13.5075 21.6711 13.2605 21.7751 13.0005 21.7751C12.7405 21.7751 12.4935 21.6711 12.3115 21.4891Z"
              fill="#5F6368"
            />
          </svg>
        ) : (
          <svg width="24" height="24" viewBox="0 0 27 26">
            <path
              opacity="0.4"
              d="M0 18.4562V7.55677C0 2.82241 2.82241 0 7.55676 0H18.4432C23.1906 0 26.013 2.82241 26.013 7.55677V18.4432C26.013 23.1775 23.1906 26 18.4562 26H7.55676C2.82241 26.013 0 23.1906 0 18.4562Z"
              fill="#9F9F9F"
            />
            <path
              d="M12.3177 21.4997L6.73787 15.9199C6.36068 15.5427 6.36068 14.9184 6.73787 14.5412C7.11506 14.164 7.73937 14.164 8.11656 14.5412L12.0315 18.4561V5.20254C12.0315 4.66927 12.4737 4.22705 13.007 4.22705C13.5403 4.22705 13.9825 4.66927 13.9825 5.20254V18.4561L17.8974 14.5412C18.2746 14.164 18.8989 14.164 19.2761 14.5412C19.4712 14.7363 19.5623 14.9834 19.5623 15.2305C19.5623 15.4777 19.4712 15.7248 19.2761 15.9199L13.6964 21.4997C13.5143 21.6817 13.2671 21.7858 13.007 21.7858C12.7469 21.7858 12.4998 21.6817 12.3177 21.4997Z"
              fill="#292D32"
            />
          </svg>
        )}
        Apply
      </button>
    </div>
  );
}
